<template>
  <div style="width: 100%;">
    <div class="lock_topSide"></div>
    <div class="lock_chamber" :style="{ height: zsHeight + 'px' }">
      <div v-if="refreshShips" class="ship_lock" :style="{ marginLeft: cordon.up + 'px', marginRight: cordon.down + 'px' }">
        <ship
          v-for="ship in ships"
          :key="ship.cbid"
          :ship="ship"
          :zoom-ratio="zoomRatio"
        ></ship>
      </div>
      <span class="text">{{ actualHeight }}米</span>
    </div>
    <div class="lock_bottomSide"></div>
    <div class="lock_scale">
      <span v-for="step in range" :key="step">{{ (step - 1) * 10 }}米</span>
    </div>
  </div>
</template>

<script>
import Ship from "@/components/LockChamber/Ship.vue";

export default {
  name: "LockChamber",

  components: {
    Ship,
  },

  props: ['actualWidth', 'actualHeight', 'cordonDistance', 'ships'],

  computed: {
    zoomRatio() {
      return this.zsConfig.width / this.actualWidth;
    },

    range() {
      return this.actualWidth / 10 + 1;
    },

    zsHeight() {
      return this.actualHeight * this.zoomRatio;
    },

    cordon() {
      return {
        up: this.cordonDistance.up * this.zoomRatio,
        down: this.cordonDistance.down * this.zoomRatio,
      }
    }
  },

  watch: {
    zsHeight() {
      this.$emit('onHeightChange');
    },

    ships() {
      this.refreshShips = false;
      this.$nextTick(() => {
        this.refreshShips = true;
      })
    },
  },

  data() {
    return {
      // TODO: 闸室配置项
      zsConfig: {
        width: 0,
      },

      refreshShips: true,
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeFunction)
  },
  mounted() {
    this.zsConfig.width = document.querySelector('.lock_chamber').clientWidth;
    window.addEventListener('resize', this.resizeFunction)
  },
  methods:{
    resizeFunction(){
      this.zsConfig.width = document.querySelector('.lock_chamber').clientWidth;
    }
  }
}
</script>

<style scoped>

.lock_topSide {
  height: 20px;
  border-bottom: 2px solid #B1CEF5;
  /*实现水平条纹背景*/
  background: repeating-linear-gradient(130deg, #ddd 0 1px, #eee 0 8px);
}

.lock_bottomSide {
  height: 20px;
  border-top: 2px solid #B1CEF5;
  background: repeating-linear-gradient(130deg, #ddd 0 1px, #eee 0 8px);
}

.lock_chamber {
  width: 98%;
  margin: 0 auto;
  border-left: 2px solid #096DD9;
  border-right: 2px solid #096DD9;

  position: relative;
}

.lock_scale {
  width: 100%;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(51,51,51,0.7);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ship_lock {
  height: 100%;
  border-left: 1px dashed #FF8D8D;
  border-right: 1px dashed #FF8D8D;
  background:url("~@/assets/img/water_bg.png") repeat;
  background-size: cover;
  position: relative;
}

.text {
  display: inline-block;
  writing-mode: vertical-lr;
  font-size: 14px;
  font-weight: 600;
  color: #777;

  position: absolute;
  top: 50%;
  right: -1%;
  transform: translateY(-50%);
}

</style>
